@import "_partial/highlight"
@import "_partial/post"
@import "_partial/page"

/*自定义头部*/
@import "_partial/my-header"

/*自定义页脚*/
@import "_partial/my-footer"

/*自定义分页*/
@import "_partial/pagination"

body {
  background: #fff;
  height: 100vh;
  font-family: PingFangSC-Regular, PingFang SC;
}

/*超链接全局样式*/
a {
  color: #042749;
  font-size: 18px;
  text-decoration: none;

  &:hover {
    color: #096DD9;
  }
}

// 隐藏移动端导航
.mobile-tab {
  display: none;
}

// 隐藏移动端详情标题
.mobile-detail-title {
  display: none;
}

/*单个博客内容样式*/
.article-container {
  margin: 20px 0;

  .blog-single {
    max-width: 1200px;
    height: 155px;
    padding: 20px;
    border: 1px solid #E7ECF1;
    box-sizing: border-box;
    display: flex;

    &:hover {
      border: 1px solid transparent;
      box-shadow: 0px 0px 16px 4px #EDF1F8;
    }

    .blog-images {
      width: 140px;
      height: 115px;
      background-repeat: no-repeat;
      background-size: cover;
      background-position-x: center;
      margin-right: 16px;
    }

    .blog-content {
      .blog-info {
        font-size: 12px;
        color: #7B8C9C;
        display: flex;
        align-items: center;
        // 分隔线

        .info-line {
          display: inline-block;
          width: 1px;
          height: 11px;
          background: #E7ECF1;
          margin: 0 12px;
        }
      }
    }
  }
}

// 主体
.mdui-m-t-5 {
  margin-top: 0px !important;
}

.mdui-container {
  min-height: calc(100vh - 154px);

  .external-link {
    margin-top: 40px;
    font-size: 16px;
    color: #096DD9;
  }
}

/*覆盖原有样式*/
.mdui-divider {
  background-color: #fff;
}


/*详情页*/
#article {
  padding-top: 30px;
}

.mdui-container {
  width: 100% !important;
  padding: 0px !important;
}

.mdui-card-content {
  padding: 0px 30px 30px !important;
  font-size: 14px;
  color: #042749;
  line-height: 22px;
}

.mdui-card {
  border: 1px solid #E7ECF1;
  box-shadow: none;
  margin: 25px 0 !important;
}

.collection-title {
  margin-top: 0px !important;
  margin-bottom: 30px !important;
}

/*导航栏*/
.navigation {
  font-size: 16px;
  height: 20px;
  line-height: 20px;
  color: #042749;
  margin: 20px 0;

  a {
    opacity: 0.5;
    font-size: 16px;

    &:hover {
      opacity: 1;
      color: #096DD9;
    }
  }
}

/*详情标题*/
.detail-header {
  padding: 0px 30px;

  .detail-title {
    font-size: 30px;
    font-weight: 500;
    color: #042749;
    margin-bottom: 14px;
  }

  .detail-info {
    font-size: 14px;
    color: #7B8C9C;
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #E7ECF1;

    span + span {
      margin-left: 24px;
    }
  }
}

// 媒体查询

@media (min-width: 600px) {
  width: 100% !important;
}

@media (min-width: 320px) and (max-width: 750px) {
  // 滚动条设置
  body::-webkit-scrollbar-thumb {
  height: 1px !important;
}

  // 滚动条兼容
  body::-webkit-scrollbar {
         width: 0px;
         height: 0px;
         background: 0 0;
       }

  // 显示顶部logo
  .mdui-container {
    min-height: calc(100vh - 44pt);

    .external-link {
      font-size: 12pt;
      margin-top: 15pt;
      color: #096DD9;
    }
  }

  .mdui-card-content {
    padding: 15pt !important;
    // 英文换行
    word-break: break-word;
  }

  // 手机导航
  .mobile-tab {
    display: block !important;
    border-bottom: 0.5pt solid #E5E5E5;
    // 溢出添加横向滚动条
    overflow-x: auto;

    .mobile-tab-container {
      //width:100%;
      width: 359pt;
      height: 45pt;
      box-sizing: border-box;
      padding: 15pt 15pt 10pt 15pt;
      display: flex;

      .link {
        display: inline-block;
        font-size: 15pt;
        color: #7B8C9C;
        text-align: center;
        margin-right: 25pt;
        // 强制链接不换行
        white-space: nowrap;
      }

      .link-active {
        font-weight: 600;
        color: #096DD9;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        height: 30pt;

        .link-underline {
          display: inline-block;
          width: 20pt;
          height: 2.5pt;
          background: #096DD9;
          border-radius: 1.5pt;
        }
      }
    }
  }

  // 列表内容
  .list-content {
    padding: 0 15pt !important;
  }

  // 博客列表单个内容
  .blog-single {
    width: 100%;
    height: 95pt !important;
    padding: 10pt !important;
    box-shadow: 0px 2.5pt 4.5pt 0px rgba(204, 210, 218, 0.1) !important;
    border: 1px solid #EAEEF2 !important;
    margin: 15pt 0 !important;
    // 移动端左侧图片

    .blog-images {
      width: 75pt !important;
      height: 75pt !important;
      margin-right: 10pt !important;
    }

    // 移动端右侧内容

    .blog-content {
      .post-header-title {
        font-size: 15pt !important;
        color: #012C53 !important;
        height: 42pt;
        line-height: 21pt;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        margin-bottom: 20pt;
      }

      // 禁用摘要

      #achieve-abstract {
        display: none;
      }

      // 禁用底部文字

      .blog-info {
        font-size: 12pt !important;

        .from-text {
          display: none;
        }

        .date-text {
          display: none;
        }

        .info-line {
          height: 10pt !important;
          margin: 0 10pt !important;
        }
      }

      // 移动端来源设置省略号

      .mobile-from {
        display: inline-block;
        width: 60pt;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  // 详情页
  #article {
    padding: 0px !important;
  }

  // 详情页pc导航
  .navigation {
    display: none !important;
  }

  .mdui-card {
    margin 0 !important;
  }

  .mdui-card-container {
    padding: 15pt;
  }

  .mdui-card-detail {
    border: none !important;
  }

  // 禁用pc端标题
  .detail-header {
    display: none;
  }

  // 移动端顶部标题
  .mobile-detail-title {
    display: block !important;
    box-sizing: border-box;
    //height:80pt;
    padding: 15pt;
    border-bottom: 1px solid #E5E5E5;

    .mobile-title {
      //height:25pt;
      line-height: 25pt;
      font-size: 18pt;
      color: #012C53;
      margin-bottom: 15pt;
    }

    .mobile-info-detail {
      color: #7B8C9C;
      font-size: 12pt;
      line-height: 10pt;
    }
  }
}

@media (min-width: 751px) {
  .mdui-card {
    width: 1200px;
  }

  .article-container {
    width: 1200px;
  }

  .mdui-container {
    width: 1200px !important;
    padding: 0px !important;
    margin: auto;
  }
}
